<script>
import {mapGetters} from 'vuex'
import DeptDialog from "@/views/departments/components/deptDialog.vue";


export default {
  name: 'departments',
  components: {DeptDialog},
  data() {
    return {
      /* 后端返回的格式不是el-tree需要的格式需要转换 */
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      /* 是否显示添加或编辑部门的弹框 */
      showDialog: false,
      /* 当前部门ID */
      currentDeptId: ''
    }
  },
  methods: {
    /* fetchDepartments函数的作用(派发一个action获取部门列表的回调函数) */
    async fetchDepartments() {
      try {
        await this.$store.dispatch('departmentsStore/fetchDepartments')
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 点击添加子部门的回调函数 */
    handleAddDepartment(department) {
      // 显示子组件弹框
      this.showDialog = true
      // 记录当前点击的部门ID(需要使用prop传递给子组件使用)
      this.currentDeptId = department.id || ''
    },
    /* 点击添编辑部门的回调函数
    async handleEditDepartment(department) {
      // 通过ref调用子组件的findDepartmentDetail()函数并且传入当前需要编辑的部门ID
      await this.$refs.deptDialog.findDepartmentDetail(department.id)
      // 记录当前点击的部门ID(需要使用prop传递给子组件使用)
      this.currentDeptId = department.id
      // 显示弹框组件
      this.showDialog = true
    },*/
    handleEditDepartment(department) {
      // 打开弹框组件
      this.showDialog = true
      // 记录当前点击的部门ID(需要使用prop传递给子组件使用)
      this.currentDeptId = department.id
      // 通过ref调用子组件的findDepartmentDetail()函数并且传入当前需要编辑的部门
      this.$refs.deptDialog.findDepartmentDetail(department)
    },
    /* 点击删除部门的回调函数 */
    async handleDeleteDepartment(department) {
      // 调用$confirm()函数提示用户是否执行此操作(该函数返回的是Promise对象，取消是cancel,确定是onfirm)
      const confirm = await this.$confirm(`永久删除${department.name}, 是否继续?`, '提示', {type: 'warning'}).catch(error => error)
      // 如果Promise的结果是'cancel'证明点击了取消则return出去不执行下面的逻辑
      if (confirm === 'cancel') return
      try {
        // 调用deleteDepartment()派发一个action传入当前的部门ID，携带ID去发送删除部门的请求
        const message = await this.$store.dispatch('departmentsStore/deleteDepartment', department.id)
        // 提示用户删除成功
        this.$message.success(message)
        /*删除部门成功之后不需要重新获取部门列表了，因为在发送删除部门的action里提交了mutation去删除Vuex中的部门
         this.$store.dispatch('departmentsStore/fetchDepartments')*/
      } catch (error) {
        // 删除失败
        this.$message.error(error.message)
      }
    }
  },

  computed: {
    /* 使用mapGetters将'departmentsStore'模块下的treeDepartments(树形部门列表)映射为组件实例的属性 */
    ...mapGetters('departmentsStore', ['treeDepartments'])
  },
  mounted() {
    /* 组件挂载完毕调用fetchDepartments()派发action发送请求获取部门列表数据存储于Vuex中 */
    this.fetchDepartments()
  },

}
</script>

<template>
  <div class="departments">
    <el-card>
      <!--头部-->
      <el-row class="header">
        <el-col :span="20">
          <svg-icon icon-class="corporation"></svg-icon>
          <span>江苏传智博客科技股份有限公司</span>
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="12">
              <span class="el-dropdown-link">负责人</span>
            </el-col>
            <el-col :span="12">
              <el-dropdown>
                <span class="el-dropdown-link">操作</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
                <el-dropdown-menu>
                  <el-dropdown-item @click.native="handleAddDepartment">添加子部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!--树形组件-->
      <el-tree :data="treeDepartments" :props="defaultProps" :expand-on-click-node="false" default-expand-all>
        <template #default="{node,data}">
          <el-row>
            <el-col :span="20">
              <el-link type="primary" :underline="false">{{ data.name }}</el-link>
            </el-col>
            <el-col :span="4">
              <el-row>
                <el-col :span="12">
                  <el-link type="primary" :underline="false">{{ data.manager }}</el-link>
                </el-col>
                <el-col :span="12">
                  <el-dropdown>
                    <el-link type="danger" :underline="false">操作</el-link>
                    <i class="el-icon-arrow-down el-icon--right" style="color: #F56C6C"></i>
                    <el-dropdown-menu>
                      <el-dropdown-item @click.native="handleAddDepartment(data)">添加子部门</el-dropdown-item>
                      <el-dropdown-item @click.native="handleEditDepartment(data)">编辑部门</el-dropdown-item>
                      <el-dropdown-item @click.native="handleDeleteDepartment(data)" v-if="!data.children.length">删除部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </el-card>
    <!--弹框组件-->
    <dept-dialog :show-dialog.sync="showDialog" append-to-body :close-on-click-modal="false" :pid="currentDeptId" ref="deptDialog"></dept-dialog>
  </div>
</template>

<style scoped lang="scss">
.departments {
  .el-card {
    margin-top: 10px;

    .header {
      display: flex;
      align-items: center;
      height: 40px;
    }

    span {
      cursor: pointer;
    }

    .el-row {
      width: 100%;
    }


    ::v-deep .el-tree-node__content {
      height: 35px;
    }
  }
}
</style>
